<template>
  <el-dialog :visible="dialogVisible" v-dialog-drag
             :title="title"
             :before-close="()=>{
              dialogVisible=false;
              loading=false;
             }"
             :width="dialogWidth"
  >
    <div>
      <el-form :model="form" :rules="rules"
               ref="form"
               label-width="auto"
               :inline="false"
               @click.prevent.stop.native
               @submit.native.prevent>



        <el-form-item
          v-for="(item,index) in colums"
          :index="index"
          :label="item.label" desc="" :prop="item.prop"
          disabled="false">
          <template v-if="item.type==='dic-select'">
            <dic-select
              v-model.trim="form[item.prop]"
              :placeholder="item.label"
              clearable
              :mul="item?.mul"
              size="small"
              :style="`width: ${item.width||'220px'};`"
              :code="item?.code"
              :optionData="item?.optionData"
              @change2="valueobj=>item?.change2?.(valueobj)"
            />
          </template>

          <template v-else-if="item.type==='switch'">
        <!--          <el-input  v-model="form[item.prop]"/>-->

            <el-switch
                v-model="form[item.prop]"
                :active-text="item?.activeText"
                :inactive-text="item?.inActiveText"

                :active-value="item?.activeValue"
                :inactive-value="item?.inActiveValue"
                >
            </el-switch>

<!--              <el-radio
              v-model="form[item.prop]"
               v-for="radioitem in (item?.radioOptios||[])" @click="()=>{
                form[item.prop]=radioitem?.value
               }"
              :label="radioitem?.value"
               :key="radioitem?.value"
               :value="radioitem?.value">{{radioitem.label}}</el-radio>-->

          </template>
          <template v-else-if="item.type==='radio'">
            <el-radio-group :value="form?.[item.prop]">
              <el-radio

                  v-for="radioitem in (item?.radioOptios||[])" @click="()=>{
                form[item.prop]=radioitem?.value
               }"
                  :label="radioitem?.value"
                  :key="radioitem?.value"
                  :value="radioitem?.value"
                  @click.native="()=>{

                   form[item.prop]=radioitem?.value
                   debugger


                  }"
                  >{{radioitem.label}}</el-radio>
            </el-radio-group>
          </template>
          <template v-else-if="item.type==='date-picker'">
            <erp-date-picker
              v-model.trim="form[item.prop]"
              :placeholder="item.label"
              clearable
              size="small"
              :type="item.dateType||'date'"
              :style="`width: ${item.width||'220px'};`"
            ></erp-date-picker>
          </template>
          <template v-else-if="item.type=='textarea'">
            <el-input size="small"
                      :placeholder="item.label"
                      v-model="form[item.prop]"
                      type="textarea"
                      :row="item.row||4"
                      clearable
                      @click.prevent.stop
                      :style="`width: ${item.width||'220px'};`"
            />
          </template>
          <template v-else-if="item.type=='number2'">
            <erp-input-number2
              size="default"
              :placeholder="item.label"
              v-model="form[item.prop]"
              around
              clearable
              :style="`width: ${item.width||'220px'};`"
            />
          </template>
          <template v-else-if="item.type=='number3'">
            <erp-input-number3
                size="default"
                :placeholder="item.label"
                v-model="form[item.prop]"
                around
                clearable
                :style="`width: ${item.width||'220px'};`"
            />
          </template>
          <template v-else-if="item.type=='starId'">
            <starSelect
              :text.sync="form.starName" v-model="form.starId" :disabled="false" placeholder="红人信息"
              clearable
              :_params="item&&item.params"
              :style="`width: ${item.width||'220px'};`"
            ></starSelect>
          </template>
          <!--经纪人-->
          <template v-else-if="item.type=='agentUserId'">
            <div :style="`width: ${item.width||'220px'};`">
              <virtualUserSelectOneAll
                v-model="form.agentUserId"
                :text.sync="form.agentUser" showMode="input"
                :disabled="false" placeholder="选择操作人员"
                :style="`width: ${item.width||'220px'};`"
                clearable></virtualUserSelectOneAll>
            </div>
          </template>
          <!--选择操作人员-->
          <template v-else-if="item.type=='user-select'">
            <div :style="`width: ${item.width||'220px'};`">
              <virtualUserSelectOneAll
                v-model="form[item.prop]"
                :text.sync="form[item.propText]" showMode="input"
                :disabled="item.disabled" placeholder="选择操作人员"
                :style="`width: ${item.width||'220px'};`"
                clearable></virtualUserSelectOneAll>
            </div>
          </template>
<!--          选择虚拟部门-->
          <template v-else-if="item.type=='virtualUserSelect'">
            <div :style="`width: ${item.width||'220px'};`">
              <virtualUserSelectOne
                  :id.sync="form[item.prop]"
                  :name.sync="form[item.propText]" showMode="input"
                  :disabled="item.disabled" placeholder="选择操作人员"
                  :code="item?.code"
                  :style="`width: ${item.width||'220px'};`"
                  clearable></virtualUserSelectOne>
            </div>
          </template>
          <template v-else-if="item.type==='onlyText'">
            <span>{{item.content}}</span>
          </template>
          <template v-else-if="item.type==='attachList'">
            <fileList
                    v-model="form[item.prop]"
                    :edit="true"
                    :big="true"
                    :isflex="true"
                    accept="image/*"
                    :is-show-image="true"
                    image-size="110px"
                    :uploadType="item.uploadType"
            ></fileList>
          </template>
          <template v-else>
            <el-input size="small"
                      :placeholder="item.label"
                      v-model="form[item.prop]"
                      :type="item.type||'text'"
                      clearable
                      @click.prevent.stop
                      :style="`width: ${item.width||'220px'};`"
            />
          </template>
        </el-form-item>
      </el-form>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click.stop.prevent="cancelEvent">{{cancelText}}</el-button>
      <el-button type="primary" @click.stop.prevent="()=>_successDialog()" :loading="loading">{{successText}}
      </el-button>
    </div>
  </el-dialog>
</template>
<script>

  import { deepClone } from '@/utils';
  import { lodashEmpty, lodashFillData } from '@/utils/lodashUtil';
  import fileList from '@/views/components/fileList/fileList.vue'

  export default {
    data(__self) {
      var promiseObject = {}

      var init_form_fromoptions = __self.$_options.init_form;
      var init_form = {};
      __self.$_options.colums.map(item => {
        init_form[item.prop] = '';
      });

       init_form = deepClone(init_form_fromoptions || init_form);
      var _form = deepClone(init_form);

      //加入formData的数据
        if(__self.$_options.formData){
          _form=Object.assign(_form,__self.$_options.formData)
        }



      return {
        promiseObject,
// region  弹出框
        dialogVisible: false,
        loading: false,
// endregion
        title: '',
        rules: [],
        colums: [],
        form:_form,
        init_form: init_form,
        dialogWidth: '500px',
        cancelText: '取 消',
        successText: '确 定',
      };
    },
    watch: {
      dialogVisible(istrue) {
        if (!istrue) {
          this.reset();
        }
      },
    },
    components: {
      fileList,
      virtualUserSelectOne: () => import('@/views/components/Select/virtualUserSelect/virtualUserSelectOne.vue'),
      starSelect: () => import('@/views/manage/cyberstar/base/select.vue'),
    },

    mounted() {
      this.dialogVisible = true;
      /**
       *
       * */
      console.log('弹出框的参数', this.$_options);
      this.title = this.$_options.title;
      this.rules = this.$_options.rules;
      this.colums = this.$_options.colums;
      this.cancelText = this.$_options.cancelText || '取 消';
      this.successText = this.$_options.successText || '确 定';
      this.dialogWidth = this.$_options.dialogWidth;




      if (this.$_options.data) {
        var _data = this.$_options.data();
        lodashFillData(this.form, _data);

        //可以修改form的隐藏字段
        if (this.$_options.setLogicFormFieldsInit) {
          this.$_options.setLogicFormFieldsInit(this.form);
        }
      }


    },

    methods: {
      initPromise() {
        var self = this
        return new Promise((resolve, reject) => {
          self.promiseObject = { resolve, reject }
        })
      },
      reset() {
        this.loading = false;
        this.form = deepClone(this.init_form);
        this.$refs['form'] && this.$refs['form'].resetFields();
      },
      validatePromise() {
        this.loading = true;
        return new Promise(resolve => {
          this.$refs['form'].validate(isyes => {
            this.loading = false;
            if (!isyes) {
              resolve({ message: '请检查必填项目', success: false });
              return;
            }

            this.dialogVisible = false;
            resolve({ success: true, data: deepClone(this.form) });
            return;
          });
        });
      },

      // region  弹出框
      async _successDialog() {
        var result = await this.validatePromise();
        this.promiseObject?.resolve(result)
        this.$_options?.success?.(result);
      },
      cancelEvent() {
        this.dialogVisible = false;
        this.promiseObject?.reject()
        this.$_options.cancel && this.$_options.cancel();
      },
      // endregion
    },
  };
</script>
